<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()

// 表单数据
const loginForm = reactive({
  username: '',
  password: '',
  role: 'teacher' // 默认选择教师角色
})

// 表单验证规则
const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

// 表单引用
const formRef = ref()

// 登录处理
const handleLogin = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      const success = userStore.login(loginForm.username, loginForm.password)
      if (success) {
        ElMessage.success('登录成功')
        // 根据角色跳转到不同的首页
        if (userStore.userInfo?.role === 'teacher') {
          router.push('/teacher/dashboard')
        } else {
          router.push('/student/dashboard')
        }
      } else {
        ElMessage.error('用户名或密码错误')
      }
    }
  })
}
</script>

<template>
  <div class="login-container">
    <div class="login-content">
      <div class="login-left">
        <div class="login-logo">
          <svg class="school-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M12 3L1 9L5 11.18V17.18L12 21L19 17.18V11.18L21 10.09V17H23V9L12 3ZM18.82 9L12 12.72L5.18 9L12 5.28L18.82 9ZM17 15.99L12 18.72L7 15.99V12.27L12 15L17 12.27V15.99Z"
              fill="currentColor"
            />
          </svg>
        </div>
        <h1 class="system-title">校园设施管理系统</h1>
        <p class="system-subtitle">高效管理 · 智慧校园</p>
      </div>
      <div class="login-right">
        <div class="login-form-container">
          <h2 class="login-title">用户登录</h2>
          <el-form
            ref="formRef"
            :model="loginForm"
            :rules="rules"
            label-position="top"
            class="login-form"
          >
            <el-form-item label="角色选择">
              <el-radio-group v-model="loginForm.role" class="role-select">
                <el-radio label="teacher">教师管理员</el-radio>
                <el-radio label="student">学生用户</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="用户名" prop="username">
              <el-input
                v-model="loginForm.username"
                placeholder="请输入用户名"
                prefix-icon="el-icon-user"
              >
                <template #prefix>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    class="input-icon"
                  >
                    <path
                      d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                      fill="currentColor"
                    />
                  </svg>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                show-password
              >
                <template #prefix>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    class="input-icon"
                  >
                    <path
                      d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"
                      fill="currentColor"
                    />
                  </svg>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item>
              <div class="login-tips">
                <p>测试账号：</p>
                <p>教师：teacher1 / 123456</p>
                <p>学生：student1 / 123456</p>
              </div>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" class="login-button" @click="handleLogin">
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  overflow: hidden;
}

.login-content {
  display: flex;
  width: 900px;
  height: 550px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.login-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #3a8ffe 0%, #1d5ffe 100%);
  color: white;
  padding: 40px;
}

.login-logo {
  margin-bottom: 20px;
}

.school-icon {
  width: 80px;
  height: 80px;
  color: white;
}

.system-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 10px;
  text-align: center;
}

.system-subtitle {
  font-size: 16px;
  opacity: 0.8;
  margin-bottom: 30px;
}

.login-right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

.login-form-container {
  width: 100%;
  max-width: 360px;
}

.login-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 30px;
  text-align: center;
}

.login-form {
  width: 100%;
}

.role-select {
  margin-bottom: 10px;
}

.login-button {
  width: 100%;
  height: 44px;
  font-size: 16px;
  border-radius: 4px;
  background: linear-gradient(135deg, #3a8ffe 0%, #1d5ffe 100%);
  border: none;
}

.input-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  color: #909399;
}

.login-tips {
  font-size: 12px;
  color: #909399;
  line-height: 1.5;
  margin-bottom: 10px;
}
</style>